<template>
  <div class="log-message-box">
    <h2>用电操作日志</h2>
    <ul>
      <li v-for="log in logs" :key="log.id">
        <span class="id">异常信息NO.：{{ log.id }}</span>
        <span class="timestamp">在{{ log.timestamp }}有异常信息</span>
        <span class="room-number">房间号：{{ log.roomNumber }}</span>
        <span class="responsible">负责人：{{ log.responsible }}</span>
        <span class="description">异常原因：{{ log.description }}！</span>
        <span class="description">异常表信息为：{{ log.info }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'OperationLogMessageBox',
  data() {
    return {
      logs: [
        {
          id: 1,
          timestamp: '2023-04-01 12:00:00',
          roomNumber: 'Room 101',
          responsible: 'John Doe',
          description: '温度过高',
          info: '0'
        },
        {
          id: 2,
          timestamp: '2023-04-01 12:05:00',
          roomNumber: 'Room 102',
          responsible: 'Jane Smith',
          description: '设备故障',
          info: '220'
        }
        // 更多日志数据
      ]
    }
  }
}
</script>

<style scoped>
.log-message-box {
  background-color: #f4f4f4;
  width: 33.3%;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center; /* 居中所有文本 */
}

.log-message-box h2 {
  color: #333;
  text-align: center; /* 居中标题 */
  margin-bottom: 20px;
}

.log-message-box ul {
  list-style: none;
  padding: 0;
}

.log-message-box li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px; /* 增加第一个信息与第二个信息的间距 */
}

.timestamp {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px; /* 设置上下间距 */
}

.room-number {
  color: #333;
  font-size: 14px;
  margin-bottom: 5px; /* 设置上下间距 */
}

.responsible {
  color: #333;
  font-size: 14px;
  margin-bottom: 5px; /* 设置上下间距 */
}

.description {
  color: #333;
  font-size: 14px;
  margin-bottom: 5px; /* 设置上下间距 */
}
</style>
